
/*! 
 ---------------------------
 Cutom Light Box
 ---------------------------
 */ 
$custom-lightbox-radius: 3px;

.custom-lightbox-html {
	display: none;
}

.custom-lightbox-overlay-mask {
	display: none;
	position: fixed;
	z-index: 99997;
	background: rgba(0,0,0,.6);
	top: 0;
	width: 100%;
	height: 100%; 
	margin: 0;
}

.custom-lightbox-close-fixed {
	display: none;
	border-radius: 50%;
	width: 36px;
	height: 36px;
	text-align: center;
	line-height: 34px;
	overflow: hidden;
	position: fixed;
	z-index: 99999;
	top: 25px;
	right: 25px;
	transform: rotate(45deg);
	cursor: pointer;
	
	&.active {
		display: block;
	}


	&:after {
		font-family: 'FontAwesome';
		content: "\f067";
		color: #fff;
		font-size: 2rem;
	}	
}

.custom-lightbox-overlay {
	display: none;
	position: fixed;
	z-index: 99998;
	top: 0;
	width: 100%;
	height: 100%;
	

	.lb-container {
		
		display: none;
		max-width: 1000px;
		margin: 0 auto;
		position: relative;
		top: 50%;
		transform: translateY(-50%);
		text-align: center;
		
		
		
		.html {

			@include outer-shadow();
			
			
			.lb-large-photos-container {
				
				overflow: hidden;
				background: #000;	
				position: relative;
				transition: all 0.1s ease;
				

				ul {
					
					margin: 0;
					padding: 0;
					height: 100%;

					li {
						padding: 0;
						display: none;
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						@include transition-default();
						
						&.active {
							
						}

						&:first-child {
							display: block;
						}
						
						
					}
					
				}
				
			}
			
			
			.lb-thumbs-container {
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				text-align: center;
				width: 100%;
				overflow: hidden;
				overflow-x: auto;
				white-space: nowrap;
				@include customScrollbar( 'vertical' );
				
				
				
				ul {
					
					margin: 0;
					padding: 0;
					
					
					li {
						width: 100px;
						max-height: 100px;
						display: inline-block;
						cursor: pointer;
						margin-right: 10px;
						margin-bottom: 10px;
						padding: 0;
						transform: scale(.9);
						@include transition-default();
						
						&.active {
							transform: scale(1);
						}
						

						img {

							box-shadow: 0px 6px 21px 1px rgba(0,0,0,0.29);
						}

					}	
				}
				

				
			}
			
			
			&::before,
			&::after {
				content: '';
				display: block;
				width: 100%;
				height: 25px;
				position: absolute;
				z-index: 1;
				left: 0;
				top: 0;
				background: #fff;
				border-top-left-radius: $custom-lightbox-radius;
				border-top-right-radius: $custom-lightbox-radius;				
			}
			
			&::after {
				top: auto;
				bottom: 0;
				border-top-left-radius: 0;
				border-top-right-radius: 0;	
				border-bottom-left-radius: $custom-lightbox-radius;
				border-bottom-right-radius: $custom-lightbox-radius;				
			}
			
			&.no-img {
				background: #fff;
				border-radius: $custom-lightbox-radius;		
			}
			
			> .lb-box {

				position: relative;
				/* Required Width */
				width: 600px;
				word-wrap: break-word;
				
				
				max-height: 60vh;
				overflow-y: auto;
				text-align: left;
				@include customScrollbar( 'horizontal' );
				
				> .content-show {
					padding: 1.5rem;
					color: $sub-text-color;
					font-size: 0.75rem;

				}


				
			
				
			
			}
		
			> img {
				border-radius: $custom-lightbox-radius; 
				max-width: 100%;
				width: auto;
			}	
			
		}
		

		
		&.pure-image {

			.html {
				&::before,
				&::after {
					display: none;
				}	

			}	

		}
		
		&.custom {
			
		}

	}

	.lb-close {
		border-radius: 50%;
		width: 36px;
		height: 36px;
		display: inline-block;
		text-align: center;
		line-height: 34px;
		overflow: hidden;
		position: absolute;
		z-index: 99999;
		top: 0;
		right: -35px;
		margin-top: -5px;
		transform: rotate(45deg);
		cursor: pointer;

		
		&.no-fixed {
			visibility: hidden;
		}
		
		&:after {
			font-family: 'FontAwesome';
			content: "\f067";
			color: #fff;
			font-size: 2rem;
		}	
	}
	
	
	&.no-fixed {
		position: absolute;
		top: 100px;
		
		
		.lb-container {
			top: 0;
			transform: translateY(0);
			padding-bottom: 5rem;
			

			.html {
				&::after {
					bottom: 5rem;				
				}	
			}

				

			&.custom {
				
				max-width: 1200px;
				
				.html > .lb-box {
					width: 1000px;
					max-height: none;

				}

			}	
			
		}
	}
	
}

@media all and (max-width: 768px) {
	.custom-lightbox-overlay {
		
		.lb-container {

			max-width: calc(100% - 30px);
			margin: 15px auto;
			
			.html {
				> .lb-box {
					width: auto;
				}	
			}
			

		}
		
		
		.lb-close {
			right: -5px;
			top: -30px;
		}
		
		&.no-fixed {
			top: 10px;

			.lb-container {
				
				&.custom {
					.html > .lb-box {
						width: auto;

					}

				}		

			}	
			
		}

	}	
}